<template>
    <div class="tree-list ptb20 box f20">
        <a-tree
            ref="treelist"
            v-if="tree.showTree"
            style="color: white"
            checkable
            :defaultExpandAll="true"
            v-model="tree.checkedKeys"
            :tree-data="tree.treeData"
        >
        </a-tree>
    </div>
</template>

<script>
// const treeData = [
//   {
//     title: 'parent 1',
//     key: '0-0',
//     children: [
//       {
//         title: 'parent 1-0',
//         key: '0-0-0',
//         disabled: true,
//         children: [
//           { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
//           { title: 'leaf', key: '0-0-0-1' },
//         ],
//       },
//       {
//         title: 'parent 1-1',
//         key: '0-0-1',
//         children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
//       },
//     ],
//   },
// ];
export default {
    name: 'TreeList',
    data () {
        return {
            tree: {
                showTree: false,
                expandAll: true,
                treeData: [],
                checkedKeys: [],
                autoExpandParent: true
            }
        }
    },
    created () {
        this.getTree()
    },
    watch: {
        tree: {
            handler () {
                this.$emit('onCheck', this.tree.checkedKeys)
            },
            immediate: false,
            deep: true
        }
    },
    methods: {
        async getTree () {
            const { data } = await this.$api.datacont.getTreeList()
            this.tree.treeData = data.list

            console.log('流程列表', this.tree.treeData)
            this.tree.checkedKeys = ['1', '2']
            this.tree.showTree = true
        }
        // onCheck (e) {
        //   this.$emit('onCheck', this.tree.checkedKeys)
        // }
    }
}
</script>

<style scoped lang="scss">
.tree-list {
    width: 230px;
    //background: white;
}
</style>
